<template>
	<u-navbar :autoBack="true" bgColor="transparent"></u-navbar>

	<!-- <image mode="aspectFill" class="banner" src="https://aph.junhecms.com/image/homePage/26.png" /> -->

	<u-swiper
		:list="swiperList"
		:height="swiperParams.height"
		@click="handleSwiper"></u-swiper>

	<view class="main">
		<view class="main-title">{{ books?.title }}</view>
		<view class="main-time">{{ books?.adate }}</view>
		<view class="main-ds">
			{{ books?.title_fu }}
		</view>
		<view class="main-line"></view>
		<view class="main-gs">概述</view>
		<view class="main-richText">
			<u-parse :content="books?.detail"></u-parse>
		</view>
		<view class="main-operation flex align-items_center space-between">
			<view @click="viewFile">在线预览</view>
			<view @click="downFile">一键下载</view>
		</view>
	</view>

	<u-modal
		:show="permissionShow"
		:showCancelButton="true"
		width="600rpx"
		title="温馨提示"
		content="需要填写个人信息后才下载相关内容"
		cancelColor="#707070"
		confirmColor="#D93954"
		cancelText="取消"
		confirmText="去填写"
		@confirm="confirmPermission"
		@cancel="permissionShow = false"></u-modal>

	<share :isCustom="true" />
	<tabbar />
</template>

<script setup>
import { ref, reactive } from 'vue';
import { post } from '@/utils/collect';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from '@/utils/tool.js';

const permissionShow = ref(false);

const viewFile = () => {
	const filePath = baseUrl + books.value.fileurl;
	uni.downloadFile({
		url: filePath,
		success: (res) => {
			if (res.statusCode === 200) {
				uni.openDocument({
					filePath: res.tempFilePath,
					showMenu: false
				});
			}
		}
	});
};

// 轮播图
const swiperList = ref([]);
const swiperParams = reactive({
	height: '750rpx'
});

const booksId = ref();
onLoad((options) => {
	booksId.value = options.id;
	_booksDet(options.id);
});

const books = ref();
const _booksDet = (id) => {
	post('/index/books_det', { id }).then((res) => {
		swiperList.value = res.data.images.map((item) => baseUrl + item);
		books.value = res.data;

		uni.setStorageSync('navTitle', res.data.title);
	});
};

const downFile = () => {
	if (parseInt(uni.getStorageSync('downBooks')) === 1) confirmPermission();
	else permissionShow.value = true;
};

const confirmPermission = () => {
	permissionShow.value = false;
	uni.navigateTo({
		url: '/homePage/corporation/index?titleType=4' + `&id=${booksId.value}`
	});
};
</script>

<style scoped lang="scss">
.main {
	padding: 35rpx 30rpx;
	&-operation {
		padding: 70rpx 0rpx 40rpx;
		view {
			width: 330rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
		}
		view:first-child {
			background: var(--mainColor);
			border: 2rpx solid var(--mainColor);
			color: #fff;
		}
		view:last-child {
			border: 2rpx solid var(--mainColor);
			color: var(--mainColor);
		}
	}
	&-richText {
		margin-top: 20rpx;
		font-weight: 300;
		font-size: 28rpx;
		color: #000000;
	}
	&-gs {
		font-weight: bold;
		font-size: 36rpx;
		color: #7d7d7d;
	}
	&-line {
		width: 690rpx;
		height: 1rpx;
		background: #d9d9d9;
		margin: 50rpx 0rpx;
	}
	&-ds {
		font-weight: 300;
		font-size: 24rpx;
		color: #454545;
		margin-top: 35rpx;
	}
	&-time {
		margin-top: 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}
	&-title {
		font-weight: 500;
		font-size: 36rpx;
		color: #2d2d2d;
		margin-top: 35rpx;
	}
}
.banner {
	display: block;
	width: 750rpx;
	height: 750rpx;
}
</style>
